<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色的第4种表示</title>
    <style>
      /* hls(色相(0-360度 单位deg 可以省略)，饱和度(往里加灰色 0-100% 0就是纯灰色)，亮度(0-100% 0是纯黑色 100是纯白色)) */
      .div1 {
          width: 50px;
          height: 50px;
          background-color: hsl(0deg,50%,50%);
      }

      .div2 {
          width: 50px;
          height: 50px;
          background-color: hsl(60deg,100%,50%);
      }

      .div3 {
          width: 50px;
          height: 50px;
          background-color: hsl(180,100%,50%);
      }

      .div4 {
          width: 50px;
          height: 50px;
          background-color: hsl(240,0%,50%);
      }

      .div5 {
          width: 50px;
          height: 50px;
          background-color: hsl(0deg,50%,0%);
      }

      .div6 {
          width: 50px;
          height: 50px;
          background-color: hsl(0deg,50%,100%);
      }
    </style>
</head>
<body>
      <div class="div1"></div>
      <br>
      <div class="div2"></div>
      <br>
      <div class="div3"></div>
      <br>
      <div class="div4"></div>
      <br>
      <div class="div5"></div>
      <br>
      <div class="div6"></div>
</body>
</html>